import React from "react";

const {Provider, Consumer} = React.createContext();

class Counter extends React.Component {
    state = {count: 0}

    // 提供共享方法
    onIncrement = (res) => {
        // 只要第二个子组件调用了这个函数，就会执行里面代码
        this.setState({
            count: this.state.count + res
        })
    }

    render() {
        return (
            <Provider value="MangoPie">
                <div className="Counter">
                    {/* 把状态提供给第一个子组件 */}
                    <Child1 count={this.state.count}/>
                    <Child2 onIncrement={this.onIncrement}/>
                    <Child3/>
                </div>
            </Provider>
        )
    }
}

class Child1 extends React.Component {
    render() {
        return (
            <h1>计数器：{this.props.count}</h1>
        )
    }
}

class Child2 extends React.Component {
    handleClick = () => {
        // 这里一旦调用，就会执行父组件里面 onIncrement函数
        this.props.onIncrement(2);
    }

    render() {
        return (
            <button onClick={this.handleClick}>+</button>
        )
    }
}

// 新创建的Child3组件，使用Consumer获取数据
class Child3 extends React.Component {
    render() {
        return (
            <Consumer>
                {value => (
                    <p>从Provider获取到的值为: {value}</p>
                )}
            </Consumer>
        );
    }
}

export default Counter;